<!--
 * @Author: bear
 * @Date: 2022-08-04 14:45:18
 * @LastEditors: bear
 * @LastEditTime: 2022-08-04 16:24:46
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div class="menu">
    <span>我要被粘贴</span>
    <span>粘贴的内容:{{ printFont }}</span>
  </div>
</template>
<script setup>
const { ref } = require("vue");
const { Menu, clipboard } = require("electron").remote;
// 定义粘贴版内容变量
const printFont = ref();
const rightTemplate = ref([
  {
    label: "粘贴",
    accelerator: "ctrl+V",
    click: () => {
      if (document.activeElement) {
        printFont.value = clipboard.readText(); // 写入焦点元素
        clipboard.clear(); // 清空剪贴板
      }
    },
  },
  {
    label: "复制",
    accelerator: "ctrl+C",
    click: () => {
      clipboard.writeText(getSelection());
    },
  },
]);
// 监听鼠标右键
window.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  clickMouseRight();
});
const clickMouseRight = () => {
  // “window.getSelection().isCollapsed”*可以返回一个布尔值，判断当前用户的鼠标是否有选中内容
  if (!window.getSelection().isCollapsed) {
    // 建立菜单模版
    const rightMenu = Menu.buildFromTemplate(rightTemplate.value);
    //把菜单模板添加到右键菜单
    rightMenu.popup();
  }
};
// 获取选中内容
const getSelection = () => {
  var text = "";
  if (window.getSelection) {
    // 除IE9以下 之外的浏览器
    text = window.getSelection().toString();
  } else if (document.selection && document.selection.type !== "Control") {
    //IE9以下，可不考虑
    text = document.selection.createRange().text;
  }
  if (text) {
    return text;
  }
};
</script>
<style scoped>
@import url("../layout/public/common.css");
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #108ba1;
  padding: 10px 20px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0adfff;
  line-height: 40px;
  cursor: pointer;
}
</style>
